import React,{Component} from 'react';
import Swiper from 'swiper';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import 'swiper/dist/css/swiper.min.css';
import './needMobile.less';
const prefix = 'need-mobile';
class NeedMobile extends Component{
    slideStart = () =>{
        var mySwiper = new Swiper ('.swiper-box', {
            autoplay : 2000,
            slidesPerView :'auto',
            spaceBetween:20,
            loop : true,
            pagination: '.swiper-pagination',
            autoplayDisableOnInteraction:false
        })
    };
    componentDidMount(){
        this.slideStart();
    };
    render(){
        let {title,source,background} = this.props;
        let backStyle = (function () {
            if(background.match(/#[A-Z,a-z,0-p]+/g)){
                return background;
            }else{
                return `url(${background}) no-repeat center`;
            }
        })();
        return(
            <div className={classNames(prefix,'clearfix')} style={{background:backStyle}}>
                <div className={prefix+'-container'}>
                    <h1>{title}</h1>
                    <div className="swiper-box" id="swiper-box">
                        <div className="swiper-wrapper">
                            {source.map((value, index) => {
                                return (
                                    value.img?
                                    <div className={classNames("swiper-slide", prefix + '-block-copy')} key={index}>
                                        <img src={value.img} alt=""/>
                                        <div className={prefix+"-copy-content"}>
                                            <span className={prefix+'-copy-index'}>{value.index}</span>
                                            <p className={prefix+'-copy-des'}>{value.content}</p>
                                        </div>
                                        {/*<p className={prefix + '-index'}>{value.index}</p>*/}
                                        {/*<p className={prefix + '-content'}>{value.content}</p>*/}
                                    </div>:
                                    <div className={classNames("swiper-slide", prefix + '-block')} key={index}>
                                        <p className={prefix + '-index'}>{value.index}</p>
                                        <p className={prefix + '-content'}>{value.content}</p>
                                    </div>
                                )
                            })}
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        )
    }
};
export default NeedMobile;
NeedMobile.propTypes = {
  title:PropTypes.string.isRequired,
  source:PropTypes.array.isRequired,
    background:PropTypes.string
};
NeedMobile.defaultProps = {
    background:'#fff'
};